<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl" class="container-fluid">
    <div class="row">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">Brand</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <div class="navbar-form navbar-right">
                        汇率(USD/CNY)<span class="text-danger" style="margin-left:15px;">1 : {{ rates[0][2]/100 }} </span>
                    </div>
                </div>
            </div>
        </nav>
    </div>
    <div class="row">
        <div class="col-sm-5">
            <table class="table table-striped table-hover">
                <tr>
                    <th>币种</th>
                    <th>市场</th>
                    <th>买入价格buy</th>
                    <th>时间</th>
                </tr>
                <tr ng-repeat="item in pricesL">
                    <td>{{ item.name }}</td>
                    <td>CCEX</td>
                    <td>
                        {{ item.buy | number:8 }}
                        <span class="text-danger" style="font-size: 12px;">(￥{{ item.buy * (rates[0][2]/100) | number:4 }})</span>
                    </td>
                    <td>{{ item.time | date:'yyyy-MM-dd HH:mm:ss' }}</td>
                </tr>
            </table>
        </div>
        <div class="col-sm-2">
            <table class="table table-striped table-hover">
                <tr>
                    <th>差价</th>
                </tr>
                <!--<tr ng-repeat="item in pricesL">
                    <td>{{ item.name }}</td>
                </tr>-->
            </table>
        </div>
        <div class="col-sm-5">
            <table class="table table-striped table-hover">
                <tr>
                    <th>币种</th>
                    <th>市场</th>
                    <th>卖出价格sell</th>
                    <th>时间</th>
                </tr>
                <tr ng-repeat="item in pricesR">
                    <td>{{ item.name }}</td>
                    <td>比特时代</td>
                    <td>
                        {{ item.sell | number:4 }}
                        <span class="text-danger" style="font-size: 12px;">(${{ item.sell / (rates[0][2]/100) | number:4 }})</span>
                    </td>
                    <td>{{ item.time | date:'yyyy-MM-dd HH:mm:ss' }}</td>
                </tr>
            </table>
        </div>
    </div>
 	
</div>


<script src="/socket.io/socket.io.js"></script>

<script>
 
</script>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$http) {
    var socket = io('http://localhost:8989/');
    socket.on('newPriceL', function (data) {
        // console.log(data);
        $scope.pricesL = data;
        // socket.emit('my other event', { my: 'data' });
        $scope.$apply();
    });
    socket.on('newPriceR', function (data) {
        // console.log(data);
        $scope.pricesR = data;
        $scope.$apply();
    });
    socket.on('newRate', function (data) {
        // console.log(data);
        $scope.rates = data;
        $scope.$apply();
    });



    // $scope.$watch('biOne',function(newValue,oldValue){
    //     if(newValue!=oldValue){
    //         console.log($scope.biOne);
    //     }
    // });
});
</script>
</body>
</html>